// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-focus';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-klar';

@media #{$mq-lg} {
    .c-page-header::before {
        background-repeat: no-repeat;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;

        .mobile-android & {
            background-image: url('/media/img/firefox/browsers/mobile/android/hero-noodles-android.svg');
            background-position: right 50% top;
        }

        .mobile-ios & {
            background-image: url('/media/img/firefox/browsers/mobile/ios/hero-noodles-ios.svg');
            background-position: top left 50vw;
            background-size: contain;
        }

        .mobile-focus & {
            background-image: url('/media/img/firefox/browsers/mobile/focus/hero-noodles-focus.svg');
            background-position: right 50% top -100px;
        }

        [dir='rtl'] & {
            @include flip-horizontally;
        }
    }
}

.mzp-c-wordmark {
    background-position: top center;
    margin-left: auto;
    margin-right: auto;

    @media #{$mq-md} {
        @include bidi(((background-position, top left, top right),));
        margin-left: 0;
        margin-right: 0;
    }
}

.c-tagline {
    @include text-body-xl;
}

.mzp-c-split-media {
    max-width: 250px;

    .c-page-header & {
        max-width: none;
    }

    @media #{$mq-lg} {
        max-width: none;
    }
}

// Page footer
.about-mozilla {
    .mzp-c-split-bg {
        padding: $spacing-2xl 0 0;
    }
}

// * -------------------------------------------------------------------------- */
//  Inline form variation

.c-inline-form {
    background: $color-white;
    border-radius: $border-radius-md;
    box-shadow: $box-shadow-md;
    margin: 0 auto $spacing-xl;
    max-width: 330px;
    padding: $spacing-lg $spacing-2xl;
    text-align: center;

    .mzp-c-form-errors {
        @include bidi(((text-align, left, right),));
    }

    .legal {
        @include text-body-xs;
    }

    .c-inline-form-title {
        @include text-title-xs;
        margin-bottom: $spacing-md;
    }

    .c-inline-form-body {
        @include text-body-lg;
    }

    @media #{$mq-lg} {
        @include bidi(((float, right, left),));

        @supports (display: grid) {
            float: none;
        }
    }
}

// * -------------------------------------------------------------------------- */
//  Download buttons

.mobile-download-buttons-wrapper {
    display: inline-block;
}

.mobile-download-buttons li {
    padding-top: $spacing-sm;
    display: inline-block;
}

.header-product-ctas {
    margin-bottom: $spacing-2xl;
}

// for android/iOS, hide widget/QR code in favor of app store badges
.android,
.ios {
    .mobile-download-buttons-wrapper {
        display: inline-block;
    }

    .qr-code-wrapper,
    .c-inline-form,
    #send-to-device {
        display: none;
    }

    .header-product-ctas {
        display: none;
    }

    // and also revert the grid to 1col
    @media #{$mq-md} {
        .c-page-header .mzp-c-split-container {
            display: revert;
            grid: revert;
        }
    }

    // and avoid the noodles background where the form was
    @media #{$mq-lg} {
        .c-page-header .mzp-c-split-body {
            width: 70%;
        }

        .c-page-header::before {
            left: 15%;
        }

        :dir(rtl) .c-page-header::before {
            right: 15%;
        }
    }
}

// hide download links for one platform from the other
.android .mobile-download-buttons .ios {
    display: none;
}

.ios .mobile-download-buttons .android,
.ios .mobile-download-buttons .android-apk {
    display: none;
}

// very basic styling for no-JS visitors
.no-js {
    .header-product-ctas {
        display: none;
    }

    .mobile-download-buttons-wrapper {
        display: inline-block;
        text-align: center;
    }

    .mobile-download-buttons {
        margin: 1em 0;

        @media #{$mq-sm} {
            @supports (display: flex) {
                & {
                    align-items: center;
                    display: flex;
                    flex-direction: column;
                    margin: 1em auto;
                    width: 340px;

                    &.hidden {
                        display: none;
                    }

                    li {
                        margin: 0 auto; // so that a single item is centred
                    }
                }
            }
        }

        .android-apk a {
            display: inline-block;
            margin: 10px 0;
            @include text-body-sm;
        }
    }
}

// * -------------------------------------------------------------------------- */
//  Send to Device overrides

#send-to-device {
    margin: 0 auto;

    footer {
        display: none;
    }
}
